<template>
  <div class="huang">
    <div class="layout-container">
      <!-- 左侧内容：固定宽度 -->
      <div class="left-section">
        <div class="Huang-logo-input">
          <div class="Huanglogo"></div>
          <div class="search-section">
            <el-input
              v-model="input2"
              placeholder="搜索商户名、地址、菜名、外卖等"
              :prefix-icon="Search"
              class="search-input"
            />
            <button class="channel-search-btn" @click="handleSearch">频道搜索</button>
            <button class="site-search-btn" @click="handleSearch">全站搜索</button>
          </div>
        </div>
      </div>

      <!-- 右侧空白部分：自动填充剩余空间 -->
      <div class="right-section"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const input2 = ref('')

const handleSearch = () => {
  router.push('/404')
}
</script>

<style scoped>
.huang{
  width: 100%;
  height: 4.5rem;
    display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}
.layout-container {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 1200px; /* 可选：限制最大宽度 */
  margin: 0 auto;     /* 居中整个容器 */
}

.left-section {
  /* 固定宽度或自动适应内容 */
  width: fit-content; /* 或者设置具体值如 width: 600px; */
}

.right-section {
  flex: 1; /* 自动填充右侧空白区域 */
  /* background-color: #f5f5f5; 可加背景色测试效果 */
}
.search-section {
  display: flex;
  align-items: center;
}
.Huang-logo-input {
  display: flex;
  align-items: center;
  gap: 80px;
  margin: 0;
  padding: 0;
}

.Huanglogo {
  background: url(//www.dpfile.com/app/pc-common/i/logo2x.png) no-repeat;
  width: 210px;
  height: 57px;
  background-size: 210px auto;
}

.search-container {
  display: flex;
  align-items: center;
}

.search-input {
  width: 400px; /* 根据设计图调整宽度 */
  font-size: 14px; /* 设置字体大小 */
  color: #606266; /* 设置文字颜色 */
}

:deep(.el-input__wrapper) {
  box-shadow: none !important;
  border: 2px solid #ff5f18; /* 设置边框颜色 */
  border-radius: 4px 0 0 4px; /* 左侧圆角 */
}

.channel-search-btn,
.site-search-btn {
  height: 40px; /* 根据设计图调整高度 */
  font-size: 16px; /* 设置字体大小 */
  color: #fff; /* 设置文字颜色 */
  border: none; /* 移除边框 */
  cursor: pointer;
}

.channel-search-btn {
  background-color: #ff5f18; /* 设置背景颜色 */
  padding: 0 20px; /* 设置内边距 */
  border-radius: 0 4px 4px 0; /* 右侧圆角 */
}

.site-search-btn {
  background-color: #fff; /* 白底 */
  color: #ff5f18; /* 橙字 */
  border: 2px solid #ff5f18; 
  padding: 0 16px; /* 内边距 */
  height: 40px; /* 高度 */
  font-size: 14px; /* 字体大小 */
  cursor: pointer;
  margin-left: 10px; /* 左侧间距 */
}
.site-search-btn:hover {
  background-color: #fef8f0;
}
</style>